// src/Button/demo/base.tsx
import React, { useState } from 'react';
import { Viewicons } from 'view-ui';
import { Button, Modal } from 'antd';
import { useCopy } from './utils';
import '../styles/index.less';

const { ...icons } = Viewicons;
export default (props: any) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const getView = (compName: string) => {
    if (typeof Viewicons[compName] !== 'function' && compName !== 'default') {
      return React.createElement(Viewicons[compName], { ...props })
    } else {
      return null;
    }
  };

  const handleCopy = (iconName: string) => {
    const text = `<${iconName} />`;
    useCopy(text)
  }

  return (
    <div>
      <Button type='primary' onClick={() => setIsModalOpen(true)}>展示 icons</Button>
      <Modal
        width={850}
        title="Icons" 
        open={isModalOpen} 
        onOk={() => setIsModalOpen(false)} 
        onCancel={() => setIsModalOpen(false)}
        footer={[
          <Button key={'1'} onClick={() => setIsModalOpen(false)} >返回</Button>
        ]}
      >
        <div className='modal-content'>
          { Object.keys(icons).map((k, i) => <div onClick={() => handleCopy(k)} key={i} className='modal-icon-item'>{getView(k) as any}<div className='content'>{k}</div></div>)}
        </div>
      </Modal>
    </div>
  );
}
